<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
"Eleeno G" by Stéphane Tsacas
Version : 0.1
Description : a first attempt to emulate the (great) Eleeno G watch.
See ChangeLog for more information.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="À la mano" />
	<title>eleeno G</title>
<script type="text/javascript"><!--
      //--------------------------+
      // Start of Javascript code.|
      //--------------------------+
	
      // Set to something for debugging. See currentTime() function.
      var debug = 0;
      // Set color parameters
      var clockColor = "DarkBlue";     // Color of the blocks
      var clockBlinkColor = "Orange";  // Color of the blinking second
      var clockBgColor = "White";     // Background color

      // Called by registerOnLoadHandler()
      function boot()
      {
	blinkSomething();
	setInterval('blinkSomething()', 1000);
      }

      // Clear the 9 minutes (small) blocks.
      function clearMinutes()
      {
	document.getElementById("minOne").bgColor = clockBgColor;
	document.getElementById("minTwo").bgColor = clockBgColor;
	document.getElementById("minThree").bgColor = clockBgColor;
	document.getElementById("minFour").bgColor = clockBgColor;
	document.getElementById("minFive").bgColor = clockBgColor;
	document.getElementById("minSix").bgColor = clockBgColor;
	document.getElementById("minSeven").bgColor = clockBgColor;
	document.getElementById("minEight").bgColor = clockBgColor;
	document.getElementById("minNine").bgColor = clockBgColor; 
      }

      // Clear the 5 "10 minutes" blocks.
      function clearTenMinutes()
      {
	document.getElementById("toTen").bgColor = clockBgColor;
	document.getElementById("toTwenty").bgColor = clockBgColor;
	document.getElementById("toThirty").bgColor = clockBgColor;
	document.getElementById("toFourty").bgColor = clockBgColor;
	document.getElementById("toFifty").bgColor = clockBgColor;
      }

      // Clear the 12 hours blocks.
      function clearHours()
      {
	document.getElementById("hourTwelve").bgColor = clockBgColor;
	document.getElementById("hourEleven").bgColor = clockBgColor;
	document.getElementById("hourTen").bgColor = clockBgColor;
	document.getElementById("hourNine").bgColor = clockBgColor;
	document.getElementById("hourEight").bgColor = clockBgColor;
	document.getElementById("hourSeven").bgColor = clockBgColor;
	document.getElementById("hourSix").bgColor = clockBgColor;
	document.getElementById("hourFive").bgColor = clockBgColor;
	document.getElementById("hourFour").bgColor = clockBgColor;
	document.getElementById("hourThree").bgColor = clockBgColor;
	document.getElementById("hourTwo").bgColor = clockBgColor;
	document.getElementById("hourOne").bgColor = clockBgColor;
      }

      // Wrapper to new Date() so you can set the time manually when debugging.
      function currentTime()
      {
	var timeNow;

	if (debug)
	  {
	    timeNow = new Date(2009, 4, 1, 0, 0, 47);
	  }
	else
	  {
	    timeNow = new Date();
	  }
	return timeNow;
      }

      // Main function, does it all.
      function blinkSomething()
      {
	var timeNow = currentTime();
	var hours = timeNow.getHours();
	var minutes = timeNow.getMinutes();
	var seconds = timeNow.getSeconds();

        if (debug)
          {
	    document.getElementById("toTen").innerHTML = "<B>20</B>";
          }

	
	// Get the hours value, and switch on all the blocks from this value down to 1.
	// (that's why there is no "break" statements between the case's).
	switch (hours)
	  {
	    // XXX how to display noon or midnight is a matter of taste.
	    // Should be a UserPref though.
	  case 0:
	    clearHours();
	    break;
	  case 12:
	    document.getElementById("hourTwelve").bgColor = clockColor;
	  case 23:
	  case 11:
	    document.getElementById("hourEleven").bgColor = clockColor;
	  case 22:
	  case 10:
	    document.getElementById("hourTen").bgColor = clockColor;
	  case 21:
	  case 9:
	    document.getElementById("hourNine").bgColor = clockColor;
	  case 20:
	  case 8:
	    document.getElementById("hourEight").bgColor = clockColor;
	  case 19:
	  case 7:
	    document.getElementById("hourSeven").bgColor = clockColor;
	  case 18:
	  case 6:
	    document.getElementById("hourSix").bgColor = clockColor;
	  case 17:
	  case 5:
	    document.getElementById("hourFive").bgColor = clockColor;
	  case 16:
	  case 4:
	    document.getElementById("hourFour").bgColor = clockColor;
	  case 15:
	  case 3:
	    document.getElementById("hourThree").bgColor = clockColor;
	  case 14:
	  case 2:
	    document.getElementById("hourTwo").bgColor = clockColor;
	  case 13:
	  case  1:
	    document.getElementById("hourOne").bgColor = clockColor;
	  }

	// Now handle the "10 minutes" blocks
	// If the time is between :00 and :09 set "10 minutes" blocks off.
	if (minutes < 10) clearTenMinutes();
	// Otherwise switch on all the needed ones.
	if (minutes >= 10) document.getElementById("toTen").bgColor = clockColor;
	if (minutes >= 20) document.getElementById("toTwenty").bgColor = clockColor;
	if (minutes >= 30) document.getElementById("toThirty").bgColor = clockColor;
	if (minutes >= 40) document.getElementById("toFourty").bgColor = clockColor;
	if (minutes >= 50) document.getElementById("toFifty").bgColor = clockColor;

	// Handle the minute rectangles.
	switch (minutes % 10)
	  {
	  case 9: document.getElementById("minNine").bgColor = clockColor;
	  case 8: document.getElementById("minEight").bgColor = clockColor;
	  case 7: document.getElementById("minSeven").bgColor = clockColor;
	  case 6: document.getElementById("minSix").bgColor = clockColor;
	  case 5: document.getElementById("minFive").bgColor = clockColor;
	  case 4: document.getElementById("minFour").bgColor = clockColor;
	  case 3: document.getElementById("minThree").bgColor = clockColor;
	  case 2: document.getElementById("minTwo").bgColor = clockColor;
	  case 1: document.getElementById("minOne").bgColor = clockColor;
	    break
	  case 0: clearMinutes();
	  }

	// Blink the last block every second.
	if (seconds & 1) document.getElementById("minBlink").bgColor = clockBlinkColor;
	else document.getElementById("minBlink").bgColor = clockBgColor;
      }

      // Last but not least, register the callback function "boot()"
      gadgets.util.registerOnLoadHandler(boot);

      //------------------------+
      // End of Javascript code.|
      //------------------------+

//-->
</script>
  </head>

	<body onload="blinkSomething(); setInterval('blinkSomething()', 1000)" >
		<table id="clockDisplay" border="5" cellspacing="1" cellpadding="0">
			<tr height="50">
				<td width="50" height="50">
					<table border="0" cellspacing="1" cellpadding="0">
						<tr height="25">
							<td id="hourSix" width="25" height="25"></td>
							<td id="hourFive" width="25" height="25"></td>
						</tr>
						<tr height="25">
							<td id="hourSeven" width="25" height="25"></td>
							<td id="hourEight" width="25" height="25"></td>
						</tr>
					</table>
				</td>
				<td width="50" height="50">
					<table border="0" cellspacing="1" cellpadding="0">
						<tr height="25">
							<td id="hourFour" width="25" height="25"></td>
							<td id="hourThree" width="25" height="25"></td>
						</tr>
						<tr height="25">
							<td id="hourNine" width="25" height="25"></td>
							<td id="hourTen" width="25" height="25"></td>
						</tr>
					</table>
				</td>
				<td width="50" height="50">
					<table border="0" cellspacing="1" cellpadding="0">
						<tr height="25">
							<td id="hourTwo" width="25" height="25"></td>
							<td id="hourOne" width="25" height="25"></td>
						</tr>
						<tr height="25">
							<td id="hourEleven" width="25" height="25"></td>
							<td id="hourTwelve" width="25" height="25"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr height="50">
				<td id="toThirty" width="50" height="50"></td>
				<td id="toTwenty" width="50" height="50"></td>
				<td id="toTen" width="50" height="50"></td>
			</tr>
			<tr height="50">
				<td id="toFourty" width="50" height="50"></td>
				<td id="toFifty" width="50" height="50"></td>
				<td width="50" height="50">
					<table border="0" cellspacing="1" cellpadding="0">
						<tr height="10">
							<td id="minFive" width="25" height="10"></td>
							<td id="minSix" width="25" height="10"></td>
						</tr>
						<tr height="10">
							<td id="minFour" width="25" height="10"></td>
							<td id="minSeven" width="25" height="10"></td>
						</tr>
						<tr height="10">
							<td id="minThree" width="25" height="10"></td>
							<td id="minEight" width="25" height="10"></td>
						</tr>
						<tr height="10">
							<td id="minTwo" width="25" height="10"></td>
							<td id="minNine" width="25" height="10"></td>
						</tr>
						<tr height="10">
							<td id="minOne" width="25" height="10"></td>
							<td id="minBlink" width="25" height="10"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>

</html>
